<template>
  <el-dialog
      :title="id?'修改系统':'新增系统'"
      :visible.sync='show'
      width='30%'
      @open="handlerOpen"
      @close="handlerBeforeClose"
      :before-close='handlerBeforeClose'>
    <el-form
        :model='systemForm'
        ref='systemForm'
        :rules='systemRules'
        label-width='130px'
        :size='size'>
      <el-form-item label='系统名称' prop='name'>
        <el-input v-model="systemForm.name" placeholder="请输入系统名称"/>
      </el-form-item>
      <el-form-item label='系统负责人' prop='leader'>
        <el-select
            placeholder='请选择负责人'
            filterable
            v-model='systemForm.leader'>
          <el-option
              v-for='(item, index) in userList'
              :key='index'
              :label='item.username'
              :value='item.id'>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='备注' prop='remark'>
        <el-input type="textarea" v-model="systemForm.remark" placeholder="请输入系统描述"/>
      </el-form-item>
    </el-form>
    <div class='footer'>
      <el-button size='medium' type='primary' @click='handlerBeforeClose'>取消</el-button>
      <el-button size='medium' type='success' @click='handlerSubmitForm'>保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import SystemApi from '@/apis/system/SystemApi'
import UserApi from '@/apis/system/UserApi'

export default {
  name: 'SystemDialog',
  props: {
    show: {
      type: Boolean,
      require: false,
      default: false
    },
    id: {
      type: Number,
      required: false
    },
  },
  data () {
    return {
      userList: [{ userId: 1, userName: '系统管理员' }],
      systemForm: {
        name: null,
        headUserName: null,
        leader: null,
        remark: null,
      },
      systemRules: {
        name: {
          required: true, message: '系统名称不能为空', trigger: 'blur'
        },
        leader: {
          required: true, message: '负责人不能为空', trigger: 'blur'
        },
      }
    }
  },
  computed: {
    size () {
      return this.$store.getters['ElementUI/getSize']
    },
  },
  mounted () {
    // this.handlerSelectUserList()
  },
  watch: {
    id (newVal) {
      if (newVal) {
        this.handlerSelectById(this.id)
      }
    },
  },
  methods: {
    async handlerSelectUserList () {
      const { data } = await UserApi.selectAvailableList()
      this.userList = data
    },
    async handlerSelectById (id) {
      const res = await SystemApi.selectById(id)
      if (res.code === '0') {
        this.systemForm = res.data
      } else {
        this.$message.error(res.messsage)
      }
    },
    handlerOpen () {
      this.handlerSelectUserList()
    },
    handlerBeforeClose () {
      this.$refs.systemForm.resetFields()
      this.$emit('close')
    },
    handlerSubmitForm () {
      this.$refs.systemForm.validate((valid) => {
        if (!valid) {
          setTimeout(() => {
            const isError = document.getElementsByClassName('is-error')
            isError[0].querySelector('input').focus()
          }, 100)
          return false
        }

        if (this.id) {
          this.handlerUpdate()
        } else {
          this.handlerCreate()
        }
      })
    },
    async handlerCreate () {
      const res = await SystemApi.create(this.systemForm)
      if (res.code === '0') {
        this.$emit('close')
        this.$message.success('保存成功')
      } else {
        this.$message.error(res.messsage)
      }
    },
    async handlerUpdate () {
      const res = await SystemApi.update(this.systemForm)
      if (res.code === '0') {
        this.$emit('close')
        this.$message.success('保存成功')
      } else {
        this.$message.error(res.messsage)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.el-dialog {
  .footer {
    text-align: center;
  }

  .el-select {
    width: 100%;
  }
}
</style>
